//  ES6 对象的 属性表达式

//  ES5 定义对象的属性，有两种方法
const beauty = {
  name: '宋轶',
  gender: 'female',
}

// 给 beauty 对象 新增 height（身高属性）的两种方式：
// 1.  方式一   -> 点
// beauty.height = 168
// 2.  方式二  ->  方括号[表达式]
// beauty['height'] = 168
// console.log(beauty)

/* 
上面代码的
  方法一： 是直接用标识符作为属性名，
  方法二： 是用表达式作为属性名，这时要将表达式放在方括号之内。
 */


// ES6 允许字面量定义对象时，
// 用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

let propKey = 'weight'
let pretty = {
  // 属性表达式，放在方括号内
  // propKey: 44,
  [propKey]: 44,
  ['nick' + 'name']: '小轶轶',

  // 表达式也可以用于定义方法名
  ['say' + 'Hi'] () {
    return `hi~,I am ${this.nickname}`
  }
}
// console.log(pretty)
// console.log(pretty.sayHi())



/*
注意事项：
1. 属性名表达式与简洁表示法，不能同时使用，会报错
2. 属性名表达式如果是一个对象，
    默认情况下会自动将对象转为字符串[object Object]，这一点要特别小心
*/
// const propKey = 'nickname'

// 错误的，不能简写
// let propKey = 'weight'
// const girl = {
//   [propKey]
// }

// 正确的
// const girl = {
//   [propKey]: '小轶轶'
// }


const keyA = { foo: 'mm' };
const keyB = { bar: 'gg' };
console.log(keyA.toString()) // ? '[object Object]'
const myObj = {
  [keyA]: keyA,
  [keyB]: keyB
}
// 上面代码中，[keyA]和[keyB]得到的都是[object Object]，
// 所以[keyB]会把[keyA]覆盖掉，
// 而myObject最后只有一个[object Object]属性。
console.log(myObj)


